<template>
	<view>
		<view class="mui-card">
			<view class="item">
				<view>客户性别</view>
				<view id="sex" style="margin-left:10px;">{{mInfo.sex}}</view>
			</view>
			<view class="item">
				<view>客户年龄</view>
				<view id="age" style="margin-left:10px;">{{mInfo.age}}</view>
			</view>
			<view class="item">
				<view>客户微信</view>
				<view id="wx" style="margin-left:10px;">{{mInfo.weixinhao}}</view>
			</view>
			<view class="item">
				<view>咨询状态</view>
				<view id="status" style="margin-left:10px;">{{mInfo.status}}</view>
			</view>
			<view class="item">
				<view>咨询时间</view>
				<view id="createTime" style="margin-left:10px;">{{mInfo.createtime}}</view>
			</view>
		</view>
		<view class="itemTwo" style="margin-bottom: 10px;">
			<view class="mui-card-header">概述</view>
			<view id="gaishu" class="mui-card-content">{{mInfo.gaishu}}</view>
		</view>
		<view class="itemTwo" style="margin-bottom: 10px;">
			<view class="mui-card-header">详情</view>
			<view id="xiangqing" class="mui-card-content">{{mInfo.xiangqing}}</view>
		</view>
		<view class="itemTwo">
			<view class="mui-card-header">图片</view>
			<view id="img" class="mui-card-content">
				<image :src="switchImg()" style="margin-top: 12rpx;">
			</view>
		</view>
		<view id="reply" style="display:none;" class="mui-card">
			<view class="mui-card-header" style="display:flex;">
				<view>回复内容</view>
				<view onclick="copy()" style="width:40px;height:20px;font-size:12px;line-height:20px;text-align:center;background:#d6d3d3;border-radius:12px;">复制</view>
			</view>
			<view id="content" class="mui-card-content">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid:'',		//咨询ID
				mInfo:'',	//咨询内容
			}
		},
		methods: {
			//根据咨询ID查询咨询内容
			getZixunInfo(mid){
				// console.log("咨询ID："+mid)
				this.$http.get('/zixun.do', {
					p: 'getZixunInfoByMid',
					mid:mid,
				}).then(res => {
					if(res.data.code==200){
						this.mInfo = res.data.data
					}
				})
			},
			//显示图片
			switchImg(image){
				if(!this.isNull(this.mInfo.images)){
					let image = this.mInfo.images[0].img;
					if(this.isNull(image)){
						return "../../static/center/doctor.png"
					}else{
						return this.host + "/image/"+image;
					}
				}else{
					return "../../static/center/doctor.png"
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		onLoad(opt) {
			this.mid = opt.mid
			this.getZixunInfo(opt.mid)
		}
	}
</script>

<style>
	*{margin:0px;padding:0px;}
	html,body{width:100%;height:100%;} 
	.mui-card-header{
		font-size:14px;
		line-height:30px;
		border-bottom:1px solid #eaeaea;
	}
	.mui-card-content{
		font-size:13px;
		padding: 5px 0 5px 0;
	}
	.item{
		width:90%;
		height:40px;
		background:white;
		margin:0px auto;
		line-height:40px;
		color:grey;
		border-bottom:1px solid #eaeaea;
		display:flex;
		padding-left: 10px;
	}
	.itemTwo{
		width:90%;
		background:white;
		margin:0px auto;
		color:#000000;
		border-bottom:1px solid #eaeaea;
		padding-left: 10px;
	}
	#img{
		display:flex;
	}
	#img img{
		width:56px;
		height:56px;
		margin:2px;
		display:block;
		object-fit:cover;
	}
	.mui-card{
		border-radius:4px;
		margin-bottom: 20px;
	}
</style>
